<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CSS | Element</title><meta name="keywords" content="HTML/CSS"><meta name="author" content="FHang"><meta name="copyright" content="FHang"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="description" content="CSS1.类型属性用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果 123456789101112131415161718192021.cs2&amp;#123;font-family:&quot;黑体&quot;; (字体)font-size:14px; (字号大小)font-style:italic; (文字样式：normal, italic(斜体), oblique(偏斜)font-w">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS">
<meta property="og:url" content="https://fhangh.gitee.io/article/ee69e452.html">
<meta property="og:site_name" content="Element">
<meta property="og:description" content="CSS1.类型属性用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果 123456789101112131415161718192021.cs2&amp;#123;font-family:&quot;黑体&quot;; (字体)font-size:14px; (字号大小)font-style:italic; (文字样式：normal, italic(斜体), oblique(偏斜)font-w">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_04.jpg">
<meta property="article:published_time" content="2020-11-05T08:41:27.507Z">
<meta property="article:modified_time" content="2021-03-14T05:49:03.603Z">
<meta property="article:author" content="FHang">
<meta property="article:tag" content="HTML&#x2F;CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_04.jpg"><link rel="shortcut icon" href="/fhangh/img/fh.png"><link rel="canonical" href="https://fhangh.gitee.io/article/ee69e452"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="yandex-verification" content="{&quot;theme_color&quot;:{&quot;enable&quot;:true,&quot;main&quot;:&quot;#49B1F5&quot;,&quot;paginator&quot;:&quot;#00c4b6&quot;,&quot;button_hover&quot;:&quot;#FF7242&quot;,&quot;text_selection&quot;:&quot;#00c4b6&quot;,&quot;link_color&quot;:&quot;#99a9bf&quot;,&quot;meta_color&quot;:&quot;#858585&quot;,&quot;hr_color&quot;:&quot;#A4D8FA&quot;,&quot;code_foreground&quot;:&quot;#F47466&quot;,&quot;code_background&quot;:&quot;rgba(27, 31, 35, .05)&quot;,&quot;toc_color&quot;:&quot;#00c4b6&quot;,&quot;blockquote_padding_color&quot;:&quot;#49b1f5&quot;,&quot;blockquote_background_color&quot;:&quot;#49b1f5&quot;}}"/><link rel="stylesheet" href="/fhangh/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css"><script>var GLOBAL_CONFIG = { 
  root: '/fhangh/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  ClickShowText: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"top-right"},
  justifiedGallery: {
    js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
    css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: false
};

var saveToLocal = {
  set: function setWithExpiry(key, value, ttl) {
    const now = new Date()
    const expiryDay = ttl * 86400000
    const item = {
      value: value,
      expiry: now.getTime() + expiryDay,
    }
    localStorage.setItem(key, JSON.stringify(item))
  },

  get: function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key)

    if (!itemStr) {
      return undefined
    }
    const item = JSON.parse(itemStr)
    const now = new Date()

    if (now.getTime() > item.expiry) {
      localStorage.removeItem(key)
      return undefined
    }
    return item.value
  }
}</script><script id="config_change">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-03-14 13:49:03'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(function () {  window.activateDarkMode = function () {
    document.documentElement.setAttribute('data-theme', 'dark')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
    }
  }
  window.activateLightMode = function () {
    document.documentElement.setAttribute('data-theme', 'light')
   if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
    }
  }
  const autoChangeMode = 'false'
  const t = saveToLocal.get('theme')
  if (autoChangeMode === '1') {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
    const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
    const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
    const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
    if (t === undefined) {
      if (isLightMode) activateLightMode()
      else if (isDarkMode) activateDarkMode()
      else if (isNotSpecified || hasNoSupport) {
        const now = new Date()
        const hour = now.getHours()
        const isNight = hour <= 6 || hour >= 18
        isNight ? activateDarkMode() : activateLightMode()
      }
      window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
        if (saveToLocal.get('theme') === undefined) {
          e.matches ? activateDarkMode() : activateLightMode()
        }
      })
    } else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else if (autoChangeMode === '2') {
    const now = new Date()
    const hour = now.getHours()
    const isNight = hour <= 6 || hour >= 18
    if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
    else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else {
    if (t === 'dark') activateDarkMode()
    else if (t === 'light') activateLightMode()
  }const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
   if (asideStatus === 'hide') {
     document.documentElement.classList.add('hide-aside')
   } else {
     document.documentElement.classList.remove('hide-aside')
   }
}})()</script><meta name="generator" content="Hexo 5.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="/fhangh/img/fh.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/fhangh/archives/"><div class="headline">文章</div><div class="length-num">26</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/fhangh/tags/"><div class="headline">标签</div><div class="length-num">10</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/fhangh/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/fhangh/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 列表</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/fhangh/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page" href="/fhangh/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li><li><a class="site-page" href="/fhangh/Gallery/"><i class="fa-fw fas fa-images"></i><span> Image</span></a></li></ul></div></div></div></div><div id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img/postImg_04.jpg)"><nav id="nav"><span id="blog_name"><a id="site-name" href="/fhangh/">Element</a></span><span id="menus"><div id="search_button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/fhangh/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/fhangh/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 列表</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/fhangh/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page" href="/fhangh/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li><li><a class="site-page" href="/fhangh/Gallery/"><i class="fa-fw fas fa-images"></i><span> Image</span></a></li></ul></div></div><span class="close" id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></span></span></nav><div id="post-info"><h1 class="post-title">CSS</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-11-05T08:41:27.507Z" title="发表于 2020-11-05 16:41:27">2020-11-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-03-14T05:49:03.603Z" title="更新于 2021-03-14 13:49:03">2021-03-14</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/fhangh/categories/%E7%BC%96%E7%A8%8B/">编程</a></span></div><div class="meta-secondline"> <span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.5k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>9分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h1><h4 id="1-类型属性"><a href="#1-类型属性" class="headerlink" title="1.类型属性"></a>1.类型属性</h4><p>用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.cs2</span>&#123;</span><br><span class="line"></span><br><span class="line">font-family:&quot;黑体&quot;; (字体)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">font-size</span><span class="selector-pseudo">:14px</span>; (字号大小)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">font-style</span><span class="selector-pseudo">:italic</span>; (文字样式：<span class="selector-tag">normal</span>, <span class="selector-tag">italic</span>(斜体), <span class="selector-tag">oblique</span>(偏斜)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">font-weight</span><span class="selector-pseudo">:bold</span>; (字体粗细<span class="selector-pseudo">:normal</span>, <span class="selector-tag">bold</span>(粗), <span class="selector-tag">bolder</span>, <span class="selector-tag">lighter</span>)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">font-variant</span><span class="selector-pseudo">:small-caps</span>; (字体变体)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">font-height</span><span class="selector-pseudo">:20px</span> (行高，行间距)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">text-transform</span><span class="selector-pseudo">:capitalize</span>; (大小写) <span class="selector-tag">uppercase</span>, <span class="selector-tag">lowercase</span>, <span class="selector-tag">none</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">color</span>:<span class="selector-id">#F00</span>; (颜色)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">text-decoration</span><span class="selector-pseudo">:underline(</span>下划线)，<span class="selector-tag">overline</span>(上划线)，（文字修饰）</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>line-through(删除线)，blink(闪烁线)，none</p>
<h4 id="2-背景属性"><a href="#2-背景属性" class="headerlink" title="2.背景属性"></a>2.背景属性</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.cs3</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="attribute">background-attachment</span>:fixed;</span><br><span class="line"></span><br><span class="line"><span class="attribute">background-image</span>:<span class="built_in">url</span>(bg.gif)</span><br><span class="line"></span><br><span class="line">background-repeat:repeat-x;</span><br><span class="line"></span><br><span class="line"><span class="attribute">background-position</span>:right bottom;</span><br><span class="line"></span><br><span class="line">background-color:#F00; (背景颜色)</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>background-image:url(地址); 背景图像</p>
<p>background-repeat:用来设置图像重复显示的形式</p>
<p>no-repeat(不重复)，repeat，repeat-x(横向重复)，repeat-y(纵向重复)</p>
<p>background-attachment:用来设置背景是否随着页面滚动而滚动</p>
<p>scroll(滚动)，fixed(固定)</p>
<p>background-position:用于设置背景图片在网页中的位置</p>
<p>left(左对齐)，right, center, top, bottom, 也可输入数字</p>
<h4 id="3-区域属性"><a href="#3-区域属性" class="headerlink" title="3.区域属性"></a>3.区域属性</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.cs4</span>&#123;</span><br><span class="line"></span><br><span class="line">center-spacing:2px; （字符间距，优先级高于单词，可选normal）</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>; (文本对齐，<span class="selector-tag">left</span>, <span class="selector-tag">right</span>, <span class="selector-tag">center</span>, <span class="selector-tag">justify</span>(绝对居中))</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">text-indent</span><span class="selector-pseudo">:10</span>; (文本缩进，设置第一行缩进距离，可取长度或百分比)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">vertical-align</span><span class="selector-pseudo">:middle</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">word-spacing</span><span class="selector-pseudo">:2px</span>; (单词间距，可取长度或<span class="selector-tag">normal</span>)</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">while-space</span><span class="selector-pseudo">:nowrap</span>;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">display</span><span class="selector-pseudo">:none</span>;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>while-spacing(空格):</p>
<p>normal:使多重空格合并成一个</p>
<p>pre:保留元素中的空格原始形象，不允许多重空格合并成一个</p>
<p>nowrap:（不换行）长文本不自动换行</p>
<h4 id="4-方框属性"><a href="#4-方框属性" class="headerlink" title="4.方框属性"></a>4.方框属性</h4><p>css可以控制框大小，外观，位置，将每个文档的元素存入其中</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.cs5</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="attribute">content</span>:  （div的内容）</span><br><span class="line"></span><br><span class="line">border:<span class="number">2px</span> （div的边框粗细）</span><br><span class="line"></span><br><span class="line">margin:<span class="number">30px</span> （div之间的间距）</span><br><span class="line"></span><br><span class="line">padding:<span class="built_in">20px</span>(填充) （content与div边框的间距）</span><br><span class="line"></span><br><span class="line">clear:<span class="built_in">right</span>(清除浮动效果)</span><br><span class="line"></span><br><span class="line">float:<span class="built_in">right</span>(浮动) 设置快元素的浮动效果</span><br><span class="line"></span><br><span class="line">height:<span class="number">400px</span></span><br><span class="line"></span><br><span class="line">width:<span class="number">400px</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>float:选择left(左对齐)元素放置在左页面空白处；right</p>
<p>padding:定义应用样式的元素内容和元素边界之间的空白大小</p>
<p>margin:定义样式元素与其他之间的空白大小</p>
<p>margin-top right bottom left</p>
<p> top 左右 bottom</p>
<p>上下 左右</p>
<p>四边</p>
<h4 id="5-边框属性"><a href="#5-边框属性" class="headerlink" title="5.边框属性"></a>5.边框属性</h4><p>可以设置元素边框的宽度、样式、颜色</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.cs6</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="attribute">border-top-width</span>:<span class="number">2px</span>;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>border-方向-（宽度）颜色：…；</p>
<p>border 宽度 solid 颜色</p>
<p>style(样式)：设定边框线的样式</p>
<p>none，dotted（点线），dashed（虚线），solid（实线），double（双实线）</p>
<p>groove（沟槽），ridge（脊形），inset（凹陷），outset（凸起）</p>
<h4 id="6-列表属性"><a href="#6-列表属性" class="headerlink" title="6.列表属性"></a>6.列表属性</h4><p>控制列表内容的各项元素</p>
<p>List-style-type(列表类型)</p>
<p>type:disc(默认实心圆),  circle(实心圆),  none, square(实心方块), decimal(数字), lower-roman(小写罗马数字)</p>
<p> upper-roman, lower-alpha(小写英文数字), upper–alpha</p>
<p>List-style-image(项目符号图像)</p>
<p>以图片做为无序列表的符号：outside（在方框外显示） inside（在方框内显示） </p>
<h4 id="7-定位属性"><a href="#7-定位属性" class="headerlink" title="7.定位属性"></a>7.定位属性</h4><p>position(位置)：可以设置浏览器放置AP Div 的方式</p>
<p>static(静态)：由浏览器决定元素的左边缘和上边缘</p>
<p>absolute(绝对)：以top、bottom、left、right,坐标为页面左上角</p>
<p>fixed(固定)：将元素相对其显示的页面或窗口进行定位</p>
<p>relative(相对)：坐标原点为当前位置</p>
<p>visibility(显示)：设置的初始化显示属性</p>
<p>inherit(继承)：继承分层父级元素的可见性属性</p>
<p>visible(可见)：层显示可见</p>
<p>hidden(隐藏)：层隐藏</p>
<p>width/height：设置元素宽，高的值</p>
<p>z-index(z轴)：定义层的顺序；可以用auto（自动）或相应数</p>
<p>overflow(溢出)：定义层中，内容超出层的边界后发生的情况</p>
<p>visible(可见)，hidden, scroll, auto</p>
<p>placement(放置)：设置层的大小和位置</p>
<p>clip(剪辑区域)：定义可见层的局部区域的位置和大小，可以把元素区域剪切成各种形状</p>
<h4 id="8-扩展属性"><a href="#8-扩展属性" class="headerlink" title="8.扩展属性"></a>8.扩展属性</h4><p>分页：通过样式来为网页添加分页符号。允许用户在指定元素前后进行分页，分页是指打印网页内容时在某一位置停止，后续内容在另一页上打印。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">page-break-before</span> ; <span class="selector-tag">page-break-after</span></span><br></pre></td></tr></table></figure>


<p>视觉效果：cursor(光标) fillter(过滤器)</p>
<p>在CSS中有一个Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从而实现各种不同范围的透明度。</p>
<p>具体语法如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="attribute">filter</span>:<span class="built_in">alpha</span>(opacity=opacity,</span><br><span class="line"></span><br><span class="line">finishopacity=finishopacity,</span><br><span class="line"></span><br><span class="line">style=style,</span><br><span class="line"></span><br><span class="line">startx=startx,</span><br><span class="line"></span><br><span class="line">starty=starty,</span><br><span class="line"></span><br><span class="line">finishx=finishx,</span><br><span class="line"></span><br><span class="line">finishy=finishy)&#125;</span><br></pre></td></tr></table></figure>


<p>具体参数含义如下：</p>
<p>opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。 </p>
<p>finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。 </p>
<p>style  指定透明区域的形状特征：0 代表统一形状，1 代表线形，2 代表放射状，3 代表矩形 </p>
<p>startx  渐变透明效果开始处的 X坐标。 只能style = 1才有效</p>
<p>starty  渐变透明效果开始处的 Y坐标。 只能style = 1才有效 </p>
<p>finishx 渐变透明效果结束处的 X坐标。 只能style = 1才有效</p>
<p>finishy 渐变透明效果结束处的 Y坐标。 只能style = 1才有效 </p>
<p>以上的参数可以选用，可以只设置一个opacity</p>
<p>实例： </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span> </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span> </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>alpha效果展示：<span class="tag">&lt;/<span class="name">title</span>&gt;</span> </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/Css&quot;</span>&gt;</span>                //*定义CSS样式*//    </span><br><span class="line"></span><br><span class="line">.half&#123;filter:alpha(opacity=50)&#125;    //*透明度50，默认形状*//  </span><br><span class="line"></span><br><span class="line">.s0&#123;filter:alpha(opacity=30,style=0)&#125; //*透明度30，统一形状*//  </span><br><span class="line"></span><br><span class="line">.s1&#123;filter:alpha(opacity=80,style=1)&#125; //*透明度80，线性透明*//  </span><br><span class="line"></span><br><span class="line">.s2&#123;filter:alpha(opacity=80,style=2)&#125; //*透明度80，放射性*//  </span><br><span class="line"></span><br><span class="line">.s3&#123;filter:alpha(opacity=80,style=3)&#125; //*透明度80，长方形*//  </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span>  </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span> </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span> </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;Sunset.jpg&quot;</span>&gt;</span>  </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">half</span> <span class="attr">src</span>=<span class="string">&quot;Sunset.jpg&quot;</span>&gt;</span>   </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">s0</span> <span class="attr">src</span>=<span class="string">&quot;Sunset.jpg&quot;</span>&gt;</span>     </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">s1</span> <span class="attr">src</span>=<span class="string">&quot;Sunset.jpg&quot;</span>&gt;</span>      </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">s2</span> <span class="attr">src</span>=<span class="string">&quot;Sunset.jpg&quot;</span>&gt;</span>        </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">s3</span> <span class="attr">src</span>=<span class="string">&quot;Sunset.jpg&quot;</span>&gt;</span>       </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span> </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h4 id="9-标准文档流组成-amp-display属性"><a href="#9-标准文档流组成-amp-display属性" class="headerlink" title="9.标准文档流组成&amp;display属性"></a>9.标准文档流组成&amp;display属性</h4><h5 id="块级元素（block-level）"><a href="#块级元素（block-level）" class="headerlink" title="块级元素（block level）"></a>块级元素（block level）</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>~<span class="tag">&lt;<span class="name">h6</span>&gt;</span>,<span class="tag">&lt;<span class="name">p</span>&gt;</span>,<span class="tag">&lt;<span class="name">div</span>&gt;</span>,<span class="tag">&lt;<span class="name">hr</span>&gt;</span>,列表</span><br></pre></td></tr></table></figure>
<h5 id="列表："><a href="#列表：" class="headerlink" title="列表："></a>列表：</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>


<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">dt</span>&gt;</span><span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">dd</span>&gt;</span><span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h5 id="内联元素（inline）"><a href="#内联元素（inline）" class="headerlink" title="内联元素（inline）"></a>内联元素（inline）</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>,<span class="tag">&lt;<span class="name">a</span>&gt;</span>,<span class="tag">&lt;<span class="name">img</span>/&gt;</span>,<span class="tag">&lt;<span class="name">strong</span>&gt;</span></span><br></pre></td></tr></table></figure>


<p>内联标签可以包含于块级标签中，成为它的子元素</p>
<h5 id="display属性："><a href="#display属性：" class="headerlink" title="display属性："></a>display属性：</h5><p>控制元素的显示与隐藏；</p>
<p>块级元素和行级元素之间的转换；</p>
<table>
<thead>
<tr>
<th>block</th>
<th>块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符</th>
</tr>
</thead>
<tbody><tr>
<td>inline</td>
<td>内联元素的默认值，元素会被显示为内联元素，该元素前后不会带有换行符</td>
</tr>
<tr>
<td>none</td>
<td>设置元素不会被显示</td>
</tr>
</tbody></table>
<h4 id="10-float浮动属性"><a href="#10-float浮动属性" class="headerlink" title="10.float浮动属性"></a>10.float浮动属性</h4><table>
<thead>
<tr>
<th>left</th>
<th>元素向左浮动</th>
</tr>
</thead>
<tbody><tr>
<td>right</td>
<td>元素向右浮动</td>
</tr>
<tr>
<td>none</td>
<td>默认值，元素不浮动，并会显示在其文本中的位置</td>
</tr>
</tbody></table>
<h5 id="clear属性"><a href="#clear属性" class="headerlink" title="clear属性"></a>clear属性</h5><table>
<thead>
<tr>
<th>left</th>
<th>在左侧不允许浮动元素</th>
</tr>
</thead>
<tbody><tr>
<td>right</td>
<td>在右侧不允许浮动元素</td>
</tr>
<tr>
<td>both</td>
<td>在左右两侧不允许浮动元素</td>
</tr>
<tr>
<td>none</td>
<td>默认值，允许浮动元素出现在两侧</td>
</tr>
</tbody></table>
<h4 id="11-overflow属性（溢出处理）"><a href="#11-overflow属性（溢出处理）" class="headerlink" title="11.overflow属性（溢出处理）"></a>11.overflow属性（溢出处理）</h4><table>
<thead>
<tr>
<th>visible</th>
<th>默认值，内容不会被修剪，会呈现在盒子之外</th>
</tr>
</thead>
<tbody><tr>
<td>hidden</td>
<td>内容会被修剪，并且其余内容比可见</td>
</tr>
<tr>
<td>scroll</td>
<td>内容会被修剪，但浏览器会显示滚动条，以显示其余内容</td>
</tr>
<tr>
<td>auto</td>
<td>如果内容会被修剪，但浏览器会显示滚动条，以显示其余内容</td>
</tr>
</tbody></table>
<h4 id="12-position属性（元素定位）"><a href="#12-position属性（元素定位）" class="headerlink" title="12.position属性（元素定位）"></a>12.position属性（元素定位）</h4><table>
<thead>
<tr>
<th>static</th>
<th>默认值，没有定位</th>
</tr>
</thead>
<tbody><tr>
<td>relative</td>
<td>相对定位</td>
</tr>
<tr>
<td>absolute</td>
<td>绝对定位</td>
</tr>
<tr>
<td>fixed</td>
<td>固定定位（在一些浏览器中不支持，使用较少）</td>
</tr>
</tbody></table>
<p>relative:相对自身原来的位置进行偏移</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"></span><br><span class="line"><span class="attribute">position</span>:relative;</span><br><span class="line"></span><br><span class="line"><span class="attribute">top</span>: px;</span><br><span class="line"></span><br><span class="line"><span class="attribute">bottom</span>: px;</span><br><span class="line"></span><br><span class="line"><span class="attribute">left</span>: px;</span><br><span class="line"></span><br><span class="line"><span class="attribute">right</span>: px;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>(px值可为负数，以浏览器为参照进行偏移，正值为偏离参照物，负值为接近参照物)</p>
<p>设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。</p>
<p>设置相对定位的盒子仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响。</p>
<p>设置了position属性值为relative的网页元素，无论是在标准流中还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。</p>
<p>absolute：绝对定位，以某个参照物进行位置偏移</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"></span><br><span class="line"><span class="attribute">position</span>:absolute;</span><br><span class="line"></span><br><span class="line"><span class="attribute">top</span>: px;</span><br><span class="line"></span><br><span class="line"><span class="attribute">bottom</span>: px;</span><br><span class="line"></span><br><span class="line"><span class="attribute">left</span>: px;</span><br><span class="line"></span><br><span class="line"><span class="attribute">right</span>: px;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>（px值可为负数，以浏览器为参照进行偏移，px为正值时，效果为距离浏览器边框距离，负值为远离浏览器边框的距离）</p>
<p>使用了绝对定位的元素以它最近的一个：“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。</p>
<p>绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。</p>
<h4 id="13-z-index属性（调整元素定位时重叠层的上下位置）"><a href="#13-z-index属性（调整元素定位时重叠层的上下位置）" class="headerlink" title="13.z-index属性（调整元素定位时重叠层的上下位置）"></a>13.z-index属性（调整元素定位时重叠层的上下位置）</h4><p>z-index属性值：整数，默认值为0；</p>
<p>设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系；</p>
<p>z-index值大的层位于其值小的层上方；</p>
<h4 id="14-网页元素透明度-amp-CSS元素透明度"><a href="#14-网页元素透明度-amp-CSS元素透明度" class="headerlink" title="14.网页元素透明度&amp;CSS元素透明度"></a>14.网页元素透明度&amp;CSS元素透明度</h4><table>
<thead>
<tr>
<th>opacity:x 属性</th>
<th>x值为0~1，值越小越透明</th>
<th>opacity:0.4;</th>
</tr>
</thead>
<tbody><tr>
<td>filter:alpha(opacity=x)</td>
<td>x值为0~100,值越小越透明</td>
<td>filter:alpha(opacity=40);</td>
</tr>
</tbody></table>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">FHang</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://fhangh.gitee.io/article/ee69e452.html">https://fhangh.gitee.io/article/ee69e452.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://fhangh.gitee.io" target="_blank">Element</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/fhangh/tags/HTML-CSS/">HTML/CSS</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_04.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/fhangh/article/2eec1551.html"><img class="prev-cover" data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_02.jpg" onerror="onerror=null;src='/fhangh/img/404.jpg'"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">HTML</div></div></a></div><div class="next-post pull-right"><a href="/fhangh/article/eaa3cd3a.html"><img class="next-cover" data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_03.jpg" onerror="onerror=null;src='/fhangh/img/404.jpg'"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">C++_核心编程</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/fhangh/article/2eec1551.html" title="HTML"><img class="cover" data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_02.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-11-05</div><div class="title">HTML</div></div></a></div></div></div></div><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="/fhangh/img/fh.png" onerror="this.onerror=null;this.src='/fhangh/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">FHang</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/fhangh/archives/"><div class="headline">文章</div><div class="length-num">26</div></a></div><div class="card-info-data-item is-center"><a href="/fhangh/tags/"><div class="headline">标签</div><div class="length-num">10</div></a></div><div class="card-info-data-item is-center"><a href="/fhangh/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/FHangH"><i class="fab fa-github"></i><span>Link To</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/FHangH" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:752972182@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div></div><div class="card-widget card-announcement"><div class="card-content"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">个人学习笔记</div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="card-content"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS"><span class="toc-number">1.</span> <span class="toc-text">CSS</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%B1%BB%E5%9E%8B%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.1.</span> <span class="toc-text">1.类型属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.2.</span> <span class="toc-text">2.背景属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E5%8C%BA%E5%9F%9F%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.3.</span> <span class="toc-text">3.区域属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E6%96%B9%E6%A1%86%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.4.</span> <span class="toc-text">4.方框属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E8%BE%B9%E6%A1%86%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.5.</span> <span class="toc-text">5.边框属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E5%88%97%E8%A1%A8%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.6.</span> <span class="toc-text">6.列表属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-%E5%AE%9A%E4%BD%8D%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.7.</span> <span class="toc-text">7.定位属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#8-%E6%89%A9%E5%B1%95%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.8.</span> <span class="toc-text">8.扩展属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#9-%E6%A0%87%E5%87%86%E6%96%87%E6%A1%A3%E6%B5%81%E7%BB%84%E6%88%90-amp-display%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.9.</span> <span class="toc-text">9.标准文档流组成&amp;display属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%EF%BC%88block-level%EF%BC%89"><span class="toc-number">1.0.0.9.1.</span> <span class="toc-text">块级元素（block level）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%EF%BC%9A"><span class="toc-number">1.0.0.9.2.</span> <span class="toc-text">列表：</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0%EF%BC%88inline%EF%BC%89"><span class="toc-number">1.0.0.9.3.</span> <span class="toc-text">内联元素（inline）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#display%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="toc-number">1.0.0.9.4.</span> <span class="toc-text">display属性：</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#10-float%E6%B5%AE%E5%8A%A8%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.10.</span> <span class="toc-text">10.float浮动属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#clear%E5%B1%9E%E6%80%A7"><span class="toc-number">1.0.0.10.1.</span> <span class="toc-text">clear属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#11-overflow%E5%B1%9E%E6%80%A7%EF%BC%88%E6%BA%A2%E5%87%BA%E5%A4%84%E7%90%86%EF%BC%89"><span class="toc-number">1.0.0.11.</span> <span class="toc-text">11.overflow属性（溢出处理）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#12-position%E5%B1%9E%E6%80%A7%EF%BC%88%E5%85%83%E7%B4%A0%E5%AE%9A%E4%BD%8D%EF%BC%89"><span class="toc-number">1.0.0.12.</span> <span class="toc-text">12.position属性（元素定位）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#13-z-index%E5%B1%9E%E6%80%A7%EF%BC%88%E8%B0%83%E6%95%B4%E5%85%83%E7%B4%A0%E5%AE%9A%E4%BD%8D%E6%97%B6%E9%87%8D%E5%8F%A0%E5%B1%82%E7%9A%84%E4%B8%8A%E4%B8%8B%E4%BD%8D%E7%BD%AE%EF%BC%89"><span class="toc-number">1.0.0.13.</span> <span class="toc-text">13.z-index属性（调整元素定位时重叠层的上下位置）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#14-%E7%BD%91%E9%A1%B5%E5%85%83%E7%B4%A0%E9%80%8F%E6%98%8E%E5%BA%A6-amp-CSS%E5%85%83%E7%B4%A0%E9%80%8F%E6%98%8E%E5%BA%A6"><span class="toc-number">1.0.0.14.</span> <span class="toc-text">14.网页元素透明度&amp;CSS元素透明度</span></a></li></ol></li></ol></li></ol></li></ol></div></div></div><div class="card-widget card-recent-post"><div class="card-content"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/3fadb38f.html" title="UE4联网和多人游戏"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_27.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="UE4联网和多人游戏"/></a><div class="content"><a class="title" href="/fhangh/article/3fadb38f.html" title="UE4联网和多人游戏">UE4联网和多人游戏</a><time datetime="2022-05-26T14:04:45.432Z" title="发表于 2022-05-26 22:04:45">2022-05-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/7dd18469.html" title="UE4 RPC"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_26.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="UE4 RPC"/></a><div class="content"><a class="title" href="/fhangh/article/7dd18469.html" title="UE4 RPC">UE4 RPC</a><time datetime="2022-05-19T04:30:00.826Z" title="发表于 2022-05-19 12:30:00">2022-05-19</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/cb9854b2.html" title="UE4 MySQL插件使用"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_25.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="UE4 MySQL插件使用"/></a><div class="content"><a class="title" href="/fhangh/article/cb9854b2.html" title="UE4 MySQL插件使用">UE4 MySQL插件使用</a><time datetime="2022-03-27T06:49:30.840Z" title="发表于 2022-03-27 14:49:30">2022-03-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/605bd1ac.html" title="UE4 MySQL插件开发"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_24.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="UE4 MySQL插件开发"/></a><div class="content"><a class="title" href="/fhangh/article/605bd1ac.html" title="UE4 MySQL插件开发">UE4 MySQL插件开发</a><time datetime="2022-03-26T07:56:25.807Z" title="发表于 2022-03-26 15:56:25">2022-03-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/fhangh/article/f7ede91d.html" title="Java基础"><img data-lazy-src="https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img_mini/postImg_19.jpg" onerror="this.onerror=null;this.src='/fhangh/img/404.jpg'" alt="Java基础"/></a><div class="content"><a class="title" href="/fhangh/article/f7ede91d.html" title="Java基础">Java基础</a><time datetime="2021-12-12T07:47:44.788Z" title="发表于 2021-12-12 15:47:44">2021-12-12</time></div></div></div></div></div></div></div></main><footer id="footer" style="background-image: url(https://cdn.jsdelivr.net/gh/FHangH/FHangBlogCDN/Post_Img/postImg_04.jpg)"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By FHang</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/fhangh/js/utils.js"></script><script src="/fhangh/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/fhangh/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',()=> {preloader.endLoading()})</script><div class="js-pjax"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="true"></script></div></body></html>